{# THE chat surface: thread, jump button, staged images, composer. The AI
   page's Chat section includes it and the drawer fetches it; there is one
   instance on a page at a time (the drawer empties while the Chat section
   shows), so the ids the scripts and the composer target stay unique.
   Needs: assistant, chat_path, stream_url, turn_defaults, messages,
   conversation_id, picker (the catalog is there to pick from), voice (how
   a spoken turn is heard, or none), approvals (the change queue's
   review list's URL, or none), voices (profiles and live calls: voice
   with a database). #}
{% from "components/macros/icons.html" import icon %}
{% from "components/macros/chat.html" import assistant_row, button_classes, conversation_field, voice_states %}
{# A call's states, as the phone and the call bar both draw them. #}
{% macro phone_states() %}{% call voice_states(record=True, work=True) %}{{ icon("phone", "w-4 h-4") }}{% endcall %}{% endmacro %}
<div id="chat" class="flex flex-col h-full"
     data-chat='{{ {"stream": stream_url, "defaults": turn_defaults, "path": chat_path}|tojson }}'>
  {% if approvals %}
  {# Every card still waiting for the user, beside the thread, so a proposal
     is never lost with the conversation it was made in. #}
  <details class="mb-3 text-xs" data-approvals>
    <summary class="cursor-pointer text-aegis-muted hover:text-aegis-text">Waiting for your approval</summary>
    {# Fetched when first opened: most visits never open it. #}
    <div hx-get="{{ approvals }}" hx-trigger="toggle once from:closest details" hx-swap="innerHTML"></div>
  </details>
  {% endif %}
  <div class="relative flex-1 min-h-0">
    <div id="chat-scroll" class="h-full overflow-y-auto pr-2">
      <ol id="chat-thread" class="space-y-6 pb-6">
        {% include "partials/chat/transcript.html" %}
      </ol>
    </div>
    <button type="button" id="chat-jump" hidden aria-label="Scroll to latest" title="Scroll to latest"
            class="absolute right-4 bottom-4 {{ button_classes('default', 'xs') }} rounded-full bg-aegis-card border-aegis-muted/50">
      {{ icon("chevron-down", "w-4 h-4", 2) }}
    </button>
  </div>

  {# Staged images live in the script (they ride the stream request, one
     turn only); the chips are drawn from that list. #}
  <div id="chat-attachments" class="shrink-0 [&:not([hidden])]:flex flex-wrap gap-2 pt-3" hidden></div>
  {# The markup the script clones: a staged image's chip, and the image
     viewer's body for the modal. Styling lives here, not in JS. #}
  <template id="chat-chip">
    <span class="inline-flex items-center gap-2 rounded border border-aegis-border bg-aegis-card pl-1 pr-2 py-1 text-xs text-aegis-text" data-chip>
      <img src="" alt="" width="28" height="28" title="View full size" class="w-7 h-7 rounded object-cover cursor-pointer" data-view-image>
      <span data-name></span>
      <button type="button" title="Remove" aria-label="Remove" class="text-aegis-muted hover:text-aegis-text" data-remove>×</button>
    </span>
  </template>
  <template id="chat-image"><img src="" alt="" width="800" height="600" class="max-h-[75vh] h-auto w-auto max-w-full mx-auto rounded"></template>
  {% if voices %}
  {# A card drawn mid-call, which the call announces: held at the foot of
     the thread until the saved turn redraws the thread. #}
  <template id="chat-live-card"><li {{ assistant_row() }} data-live-card></li></template>
  {% endif %}
  {% if voice %}
  {# What the microphone is doing, read out as well as shown. The server's
     own refusals (nothing heard, transcription down) arrive as text. #}
  <template id="chat-mic-states">
    <span>
      <span data-state="recording">Listening - press the microphone again when you're done.</span>
      <span data-state="transcribing">Working out what you said...</span>
      <span data-state="thinking">{{ assistant }} is working on it...</span>
      <span data-state="speaking">Speaking - press the microphone to interrupt.</span>
      <span data-state="denied">The microphone is blocked. Allow it for this site, or type instead.</span>
      <span data-state="unsupported">This browser can't record here. You can type instead.</span>
      <span data-state="offline">Couldn't reach the app. You can type instead.</span>
      {% if voices %}
      <span data-state="live">Talking live - just speak.</span>
      <span data-state="working">{{ assistant }} is pulling that up...</span>
      <span data-state="muted">Muted - {{ assistant }} can't hear you.</span>
      {% endif %}
    </span>
  </template>
  {% endif %}
  <p id="chat-mic-status" class="shrink-0 pt-2 text-xs text-aegis-muted empty:hidden" aria-live="polite"></p>
  {# Composer: the post appends the turn's bubbles; the script takes it from
     there. Enter sends, Shift+Enter inserts a newline. #}
  <form id="chat-composer" class="shrink-0 border-t border-aegis-border pt-3 flex flex-wrap items-end gap-2"
        hx-post="{{ chat_path }}/turns" hx-target="#chat-thread" hx-swap="beforeend"
        x-data="{ text: '', staged: 0 }" @chat-staged.window="staged = $event.detail"
        @htmx:after-request="if ($event.detail.successful && $event.detail.elt === $el) { text = ''; $refs.input.style.height = 'auto' }">
    {{ conversation_field(conversation_id) }}
    {# The chips are a row of their own above the box: beside it, in the
       drawer, they took the width the message needs. #}
    <div class="w-full flex flex-wrap items-center gap-x-4 gap-y-1" data-composer-chips>
      {% if picker %}<span id="chat-model" hx-get="{{ chat_path }}/models/chip" hx-trigger="load" hx-target="this" hx-swap="outerHTML"></span>{% endif %}
      {% if voices %}<span id="chat-voice" hx-get="{{ chat_path }}/voices/chip" hx-trigger="load" hx-target="this" hx-swap="outerHTML"></span>{% endif %}
    </div>
    {# Not ``required``: a message may be images alone (the route sends the
       house line); Send stays disabled until there is text or an image. #}
    <textarea name="message" x-ref="input" x-model="text" rows="1"
              placeholder="Message {{ assistant }}"
              @keydown.enter="if (!$event.shiftKey) { $event.preventDefault(); if (text.trim() || staged) $el.form.requestSubmit() }"
              @input="$el.style.height = 'auto'; $el.style.height = $el.scrollHeight + 'px'"
              class="textarea textarea-bordered textarea-sm bg-aegis-bg flex-1 resize-none max-h-40 leading-relaxed min-h-0 py-3"></textarea>
    <label class="{{ button_classes('default') }} cursor-pointer" title="Attach images">
      <input type="file" id="chat-attach" accept="image/png,image/jpeg,image/webp,image/gif" multiple class="sr-only" aria-label="Attach images">
      {{ icon("paperclip", "w-4 h-4") }}
    </label>
    {% if voice %}
    {# The microphone: records while pressed on, then sends what it heard as
       the message (static/js/voice.js). data-state is what the assistant is
       doing; voice_states draws it. #}
    <button type="button" id="chat-mic" data-state="idle"
            class="group relative {{ button_classes('default') }} data-[state=recording]:text-error data-[state=recording]:border-error data-[state=speaking]:text-aegis-teal data-[state=speaking]:border-aegis-teal"
            aria-pressed="false" aria-label="Speak a question" title="Speak a question"
            data-transcripts="{{ chat_path }}/speech/transcripts" data-say="{{ chat_path }}/speech/say"
            data-voice='{{ voice|tojson }}'>
      {% call voice_states(record=True) %}{{ icon("mic", "w-4 h-4") }}{% endcall %}
    </button>
    {% endif %}
    {% if voices %}
    {# A live call (routes/partials/chat_live.py): the server holds the
       engine's session and carries the audio over this mount's socket. #}
    <button type="button" id="chat-live" data-state="idle"
            class="group relative {{ button_classes('default') }} data-[state=recording]:text-aegis-teal data-[state=recording]:border-aegis-teal data-[state=speaking]:text-aegis-teal data-[state=speaking]:border-aegis-teal data-[state=working]:text-aegis-teal data-[state=working]:border-aegis-teal"
            aria-pressed="false" aria-label="Talk live" title="Talk live"
            data-relay="{{ chat_path }}/live/ws" data-worklet="{{ static('js/mic-worklet.js') }}"
            data-thread="{{ chat_path }}/conversations/">
      {{ phone_states() }}
    </button>
    {% endif %}
    <button type="button" id="chat-stop" hidden class="{{ button_classes('default') }}" aria-label="Stop">Stop</button>
    <button type="submit" id="chat-send" class="{{ button_classes('primary') }}" aria-label="Send" :disabled="!text.trim() && !staged">Send</button>
  </form>
  {% if voices %}
  {# In a call the composer row gives way to this: what the call is doing
     (voice_states), the engine, a timer and the running cost, mute and
     hang up. voice.js swaps the two and fills the figures. #}
  <div id="chat-call" hidden data-state="idle"
       class="group shrink-0 border-t border-aegis-border pt-3 flex items-center gap-3">
    <span class="relative w-9 h-9 rounded-full bg-aegis-teal/10 text-aegis-teal flex items-center justify-center">
      {{ phone_states() }}
    </span>
    <span class="min-w-0 flex-1 text-sm text-aegis-text tabular-nums">
      Live · <span data-call-engine></span> · <span data-call-timer>0:00</span>
      <span class="text-aegis-muted"> · <span data-call-cost></span><span data-call-cost-later>priced as it goes</span></span>
    </span>
    <button type="button" id="chat-mute" aria-pressed="false" aria-label="Mute" title="Mute"
            class="group/mute {{ button_classes('default') }} aria-pressed:text-error aria-pressed:border-error">
      <span class="group-aria-pressed/mute:hidden">{{ icon("mic", "w-4 h-4") }}</span>
      {{ icon("mic-off", "hidden group-aria-pressed/mute:block w-4 h-4") }}
    </button>
    <button type="button" id="chat-hang-up" aria-label="Hang up" title="Hang up"
            class="{{ button_classes('default') }} text-error border-error hover:bg-error/10">
      {{ icon("phone", "w-4 h-4 rotate-[135deg]") }}
    </button>
  </div>
  {% endif %}
</div>